<template>
  <div>
    <!-- 添加可选快递 弹窗 -->
    <el-dialog :visible="visible" title="添加可选快递" class="dialog" width="60%" @close="closeDialog">
      <div>
        <!-- {{ checkList }}
        <br>
        <br>
        <br>
        {{ expressList }} -->
        <!-- <el-checkbox-group v-model="checkList">
          <el-row v-for="(item, index) in expressList" :key="index">
            <el-col :span="4">
              <el-checkbox :label="item.expressCode" :value="item.expressCompany">{{ item.expressCompany }}</el-checkbox>
            </el-col>
            <el-col :span="7"/>
          </el-row>
        </el-checkbox-group> -->
        <table class="expressTable">
          <!-- {{ expressList }} -->
          <el-checkbox-group v-model="checkList">
            <tr v-for="(item, index) in expressList" :key="index">
              <td>
                <el-checkbox
                  :label="item.expressCompany"
                  @change="checked => checkFn(checked, item)"
                >{{ item.expressCompany }}</el-checkbox>
              </td>
              <td>
                <el-input
                  :disabled="!item.tick"
                  v-model="item.postage"
                  class="input"
                  type="text"
                  placeholder="请填写快递价格"
                  @blur="checkNum(item)"/>
              </td>
            </tr>
          </el-checkbox-group>
        </table>
        <div class="bottomButton" style="height:60px">
          <el-button type="primary" @click="addFormFn('specificationForm')">确定</el-button>
          <el-button v-preventReClick type="info" @click="closeDialog()">取消</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import vueCropper from '@/components/cropper'
import { Message } from 'element-ui'
import { checkNotEmail, checkNum, checkStudentNum } from '@/utils/validateUtil';

const validateStudentNum = (rule, value, callback) => {
  if (!checkStudentNum(value)) {
    callback(new Error())
  }
  callback()
};

export default {
  components: { vueCropper },
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    expressData: {
      type: Array,
      required: true
    },
    expressIndex: {
      type: Number,
      required: true
    }

  },
  data() {
    return {
      expressList: [
        {
          expressCode: 'shunfeng',
          expressCompany: '顺丰速运',
          postage: '',
          tick: false
        },
        {
          expressCode: 'jd',
          expressCompany: '京东物流',
          postage: '',
          tick: false
        },
        {
          expressCode: 'debangkuaidi',
          expressCompany: '德邦快递',
          postage: '',
          tick: false
        }
      ],
      checkList: [],
      validate: false
    }
  },
  watch: {
    expressIndex(val) {
      if (val === 0) {
        this.initCheckList()
      }
    }
  },
  mounted() {
    // this.checkList = this.expressData
  },
  methods: {
    initCheckList() {
      this.checkList = []
      const objList = Object.assign([], this.expressData)
      // console.log('objList:', objList)

      for (let i = 0; i < this.expressList.length; i++) {
        for (let j = 0; j < objList.length; j++) {
          if (this.expressList[i].expressCode === objList[j].expressCode) {
            // console.log('执行了第' + i + '个', objList[j].postage)
            this.expressList[i].postage = objList[j].postage
            this.expressList[i].tick = true
          }
        }
      }
      for (let x = 0; x < objList.length; x++) {
        this.checkList.push(objList[x].expressCompany)
      }
      //   this.checkList = ['选中且禁用', '京东物流']
      this.validate = true
    },
    checkNum(item) {
      // const reg = /^(?=0\.[0-9]|[0-9]\.\d).{3}$|^([0-9])$/
      if (item.postage === '') return
      console.log('checkNum', item.tick)
      //   if (item.postage === '' && !item.tick) {
      //     Message.error(`请添加${item.expressCompany}的快递价格`);
      //     return
      //   }
      const reg = /^(\d+)(.\d{0,2})?$/
      const re = new RegExp(reg);
      if (!re.test(item.postage)) {
        Message.error(`${item.expressCompany}请填写正确的数字,小数点保留两位`)
        this.validate = false
        return
      }
      this.validate = true
      console.log(item.postage)
    },
    checkFn(checked, item) {
      console.log(checked)
      console.log(item.expressCode, item.expressCompany)
      item.tick = checked
      if (!item.tick) {
        item.postage = ''
      }
    },
    addFormFn() {
      // console.log(this.checkList)
      if (!this.checkList.length) {
        Message.error('请选择添加可选快递')
        this.validate = false
        return
      }
      for (let i = 0; i < this.checkList.length; i++) {
        if (this.checkList[i].postage === '') {
          Message.error(`请添加${this.checkList[i].expressCompany}的快递价格`);
          this.validate = false
          break;
        }
      }
      console.log(this.validate)
      if (this.validate) {
        const obj = this.findSentData(this.checkList, this.expressList)
        // console.log('筛选完的数据：', obj)
        this.$emit('sentData', obj)
        this.closeDialog()
      }
    },
    findSentData(checkList, expressList) {
      const arr = []
      console.log(checkList)
      for (let i = 0; i < checkList.length; i++) {
        for (let j = 0; j < expressList.length; j++) {
          if (checkList[i] === expressList[j].expressCompany) {
            arr.push(expressList[j])
          }
        }
      }
      return arr
    },
    closeDialog() {
      this.expressList.forEach(item => {
        delete item.tick
      })
      // console.log(this.expressList)
      // alert(1)
      // this.$emit('closed', this.expressData)
      this.$emit('update:visible', false)
      this.$emit('update:expressIndex', -1)
    }
  }
}
</script>>
<style lang="scss" scoped>
    .fl{
        float: left;
    }
    .fr {
        float: right
    }
    .ml10{
        margin-left: 10px;
    }
    .dialog{
        padding:10px;
    }
    .expressTable{
        margin-left: 20px;
        td {
            line-height: 50px;
        }
    }
    .bottomButton{
        height: 70px;
        padding-top: 10px;
        border-top: 1px solid #DDD;
        width: 100%;
        height: 40px;
        text-align: center;
    }

    .input{
        margin-left: 20px;
    }
    .bottomDiv{
        padding:0 0 20px 11%;
    }
</style>
